<!--
名称:新版菜单管理
时间:2021/07/08
作者:huandi_cd
-->
<template>
    <el-card class="wly-page" >
        <v-header title="菜单管理"></v-header>
        <el-container>
        <el-aside width="30%" :style="{height:`${asideHeight}px`}" class="menuAside" >
            <!--新增一级菜单按钮-->
            <div class="addBox">
<!--        <i @click="showAddBox('OneTitle')" :style='{color:(isOne?"#17a2b8":"black")}' class="el-icon-circle-plus">新增一级菜单</i>-->
                <AButton style="margin-left: 10px" button-name="新增目录"  icon="el-icon-plus" @click="showAddBox('OneTitle')"></AButton>
            </div>
            <!--菜单展示树形结构-->
            <el-tree style="margin-right:0;margin-top:2px;background:#fff"
            :data="menuData"
            node-key="menuId"
            @node-click="handleNodeClick"
            default-expand-all
            :expand-on-click-node="false">
    <span style="ligin-height:40px;" @click="showTable(data)" class="custom-tree-node" slot-scope="{ node, data }">
      <li  :class="{'activeBGC':(data.menuId==activatedId && !isOne),'el-icon-folder-opened':data.attr=='1','el-icon-document':data.attr!='1'}">{{data.name}}</li>
      <!-- <span :class="(data.menuId==activatedId && !isOne)?'activeBGC':''">{{data.name}}</span> -->
      <el-dropdown  @command="handleCommand" style="height:20px;margin-left: 120px"  size="mini">
<!--          <i class="el-icon-arrow-down el-icon&#45;&#45;right" ></i>-->
          <span>...</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="add" v-show="data.attr=='1'">
                <i  v-if="data.attr=='1'"  title="新增"   @click="showAddBox(node, data)" style="width:100%" class="el-icon-folder-add"></i>
            </el-dropdown-item>
            <el-dropdown-item command="edit">
                <i class="el-icon-edit"  title="修改" style="width:100%" @click="rename(node, data,menuId)"></i>
            </el-dropdown-item>
            <el-dropdown-item command="del">
              <i @click="remove(node, data,menuId)"  title="删除" class="el-icon-delete" style="width:100%" ></i>
            </el-dropdown-item>
            <el-dropdown-item command="move">
              <i @click="moveMenu(node, data,'1')"  title="上移" class="el-icon-top" style="width:100%" ></i>
            </el-dropdown-item>
            <el-dropdown-item command="move">
              <i @click="moveMenu(node, data,'2')"  title="上移" class="el-icon-bottom" style="width:100%" ></i>
            </el-dropdown-item>
          </el-dropdown-menu>
      </el-dropdown>
    </span>
  </el-tree>
        </el-aside>
        <!--右侧菜单编辑新增处-->
        <el-mian  class="addModel" >
    <!-- <div style="text-align:center;font-size:18px">{{isShowReNam ?'修改目录':'新增目录'}}</div> -->
            <div class="selectType">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item>
          <div style="text-align:center;font-size:18px">{{isShowReNam ?'修改目录':'新增目录'}}</div>
        </el-form-item>
        <el-form-item v-if="!isShowReNam" style="width:100%;text-align:center;margin-top: -20px">
          <el-radio v-model="radio" label="1" border>新增分组</el-radio>
          <el-radio v-model="radio" label="2" border>新增目录</el-radio>
        </el-form-item>
        <el-form-item label="上级名称:" style="margin-top: -25px">
          <span v-if="!isOne" style="ligin-heiht:60px">{{makedate.name?makedate.name : '新增一级分组'}}</span>
          <!-- <el-input  v-if="!isOne" v-model="makedate.name"></el-input> -->
        </el-form-item>
        <el-form-item style="margin-top: -22px" :label='radio=="2"?"目录名称:":"分组名称:"'>
          <el-input v-model="newTitle" placeholder="请输入..."></el-input>
        </el-form-item>
         <el-form-item v-if="radio=='2'" label='目录路径:'>
          <el-input v-model="menupath" placeholder="请输入..."></el-input>
        </el-form-item>
        <el-form-item v-if="!isShowReNam" label="描述信息:">
          <el-input style="width:100%;margin-right:5px"
          lable="描述信息"
          type="textarea"
          :rows="2"
          placeholder="请输入描述信息"
          v-model="textarea">
        </el-input>
        </el-form-item>
          <!--选择图标-->
        <el-form-item label="图标:" >
            <el-radio-group v-model="icon" style=" border:1px solid #ccc; width: 100%; height: 150px; overflow-y: auto;">
                <el-radio style="margin-left: 18px; margin-top: 5px;" v-for='(item, i) in menuIcon' :key="i"  :label='item.icon'>
                    <i  class="iconfont" :class="'icon-'+item.icon"/>
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item style="text-align:center">
            <div  class="form-button">
                <AButton button-name="保存" type="primary" icon="el-icon-wallet"  @click="addMenuData">保存</AButton>
                <!--<router-link to="/positionBriefing"><AButton button-name="转到" type="primary" icon="el-icon-wallet">转到</AButton></router-link>-->
                <!--<router-link to="/MenuManagement"><AButton button-name="转到" type="primary" icon="el-icon-wallet">转到</AButton></router-link>-->
                <AButton  @click="routerTo" button-name="转到" type="primary" icon="el-icon-wallet">转到</AButton>
            </div>
        </el-form-item>
      </el-form>
    </div>
         </el-mian>
        </el-container>

    </el-card>
</template>
<script>
import {MGNDIRQUERY, ADD_MENU,
    EDIT_MENU, DELETE_MENU, MOVE_MENU
} from '@api/url'
import getTime from '@/assets/js/getDate'
import AButton from '../../components/AInitPage/AUnitList/AButton'
import ajax from '../../api/ajax'
export default {
    components: {AButton},
    data () {
      return {
          // builder: true,
          asideHeight: window.innerHeight - 150,
          /* 图标集合 */
          menuIcon: [
          {icon: 'account-manager'},
          {icon: 'composite-query'},
          {icon: 'esb-manager'},
          {icon: 'config'},
          {icon: 'back'},
          {icon: 'list'},
          {icon: 'close'},
          {icon: 'locate'},
          {icon: 'cut'},
          {icon: 'win-restore'},
          {icon: 'exit'},
          {icon: 'save'},
          {icon: 'runo24 '},
          {icon: 'share'},
          {icon: 'homepage'},
          {icon: 'attribute'},
          {icon: 'clipboard'},
          {icon: 'system-manager'},
          {icon: 'workspace'},
          {icon: 'copy '},
          {icon: 'user-setting'},
          {icon: 'arrowup'},
          {icon: 'arrowdown'},
          {icon: 'thumbnail'},
          {icon: 'paste'},
          {icon: 'tool-kit'},
          {icon: 'person'},
          {icon: 'arrow-left'},
          {icon: 'search'},
          {icon: 'question-full'},
          {icon: 'arrow-down-full'},
          {icon: 'arrow-up-full'},
          {icon: 'arrow-right-full'},
          {icon: 'arrow-left-full'},
          {icon: 'optimise'},
          {icon: 'user-manager'},
          {icon: 'leftEnd '},
          {icon: 'rightEnd'},
          {icon: 'close_full'},
          {icon: 'screen'},
          {icon: 'download'},
          {icon: 'adapt-size'},
          {icon: 'topbar-sidebar-arrow-right '},
          {icon: 'back-fill'},
          {icon: 'delete'},
          {icon: 'win-maximize'}],
          /* 当前图标 */
          icon: '',
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        tag: '......',
        reNameVal: '', // 修改后的表或者分组名称
        isOne: false, // 是否增加一级标题 默认不是
        textarea: '', // 添加分组时备注
        makedate: {}, // 操作数据
        menuId: '1',
        menupath: '', // 路径  分组无路径
        newId: 1, // 前端生成id
        newTitle: '', // 新增表名称
        radio: '2', // 2新增表  1新增分组
        renameData: {name: ''},
        isShowReNam: false, // 重命名框是否显示
        isShowAddModel: false, // 添加表名是否显示
        menuData: [],
        options: [{
          tableTitle: 'sql',
          label: 'SQL'
        }, {
          tableTitle: 'EXCEL',
          label: 'EXCEL'
        }, {
          tableTitle: '数据库',
          label: '数据库'
        }, {
          tableTitle: '自助数据集',
          label: '自助数据集'
        }],
        tableTitle: '',
        activatedId: ''
      }
    },
    created () {
       this.getTree() // 查询目录
    },
   methods: {
        // 转到新页面
       routerTo () {
           // this.$router.push({path: '/home/positionBriefing'})
           window.open('/#/home/' + this.menupath)
           // this.$router.push('/home/PosplancreateList')
       },
     // 显示增加表格数据的盒子
      showAddBox (node, data) {
        this.newTitle = ''
        this.menupath = ''
        this.isShowAddModel = true
        this.isShowReNam = false
        console.log('选中按钮')
        console.log(this.radio)
        console.log(node)
        // 如果是通过点击新增一级标题来的,操作数据为空对象
        if (node == 'OneTitle') {
          this.isOne = true
          this.radio = '1'
          this.makedate = {}
        } else {
          this.activatedId = data.menuId
          console.log(`id:${this.activatedId}`)
           this.makedate = data
           this.isOne = false
           console.log(data)
        }
      },
      cancel () {
        this.isShowAddModel = false
      },
      showTable (data) {
        console.log('显示右侧表格数据')
        console.log(data)
        if (data.attr != '1') {
           // 选择了操作的元数据表主表---用于数据准备
          this.$storeSave.state.selectMenuData = data
          debugger
          this.$emit('select-table', data)
          this.activatedId = data.menuId
        }
        console.log(`id:${this.activatedId}`)
      },
      // 重命名
      rename (node, data) {
          debugger
        this.isOne = false
        this.makedate = data
        this.isShowReNam = true
        this.newTitle = data.name
        this.menupath = data.path
        this.renameData = data
        this.activatedId = data.menuId
        this.icon = data.icon
        if (data.attr == '1') { // 1是分组，其他的是各类型
          this.radio = '1'
        } else {
          this.radio = '2'
        }
      },
      addEvent (param) {
        this.$http.post(ADD_MENU, param).then(res => {
          console.log('新建表新增成功')
          console.log(res)
         if (res.data.code == '200') {
           this.newTitle = ''
           this.textarea = ''
           this.radio = ''
           this.menupath = ''
             this.icon = ''
           this.getTree()
         }
        }).catch(err => {
          console.log('新建表新增失败')
          console.log(err)
        })
      },
      addMenuData () {
        // 非空判断
        // 新增表的时候，新增类型不能为空 名称不能为空
        // 新增分组的时候 名称不能为空
        //  radio: '2',//2新增表  1新增分组
        if (!this.newTitle) {
            this.$message({
                type: 'error',
                message: '分组名称/目录名称不能为空,请输入分组名称/目录名称!！'
            })
            return
          }
          if (this.radio == '2') {
              if (!this.menupath) {
                  // 新增路径不能为空
                  this.$message({
                      type: 'error',
                      message: '路径不能为空,请输入路径！'
                  })
                  return
              }
          }
        if (this.isShowReNam) { // 去修改
          this.updateModel()// 修改
        } else {
          // 新增
          this.addMenu()
        }
      },
      addMenu () {
        let timeStr = getTime.getTime()
        this.newId++
        let menuId = `${timeStr}${this.newId}`
        const newChild = {
          optMode: 'A', // A代表新增
          icon: this.icon,
          menuId: menuId, // id
          name: this.newTitle, // 表格名称
          parentId: this.makedate.menuId ? this.makedate.menuId : '0',
          type: '3', // 新增类型
          attr: this.radio, // 子节点还是分组
          path: this.radio == '2' ? this.menupath : '', // 路径
          seqno: '1', // 排最前面
          mark: this.textarea, // 描述
          createdBy: this.$storeSave.state.userInfo.username || 'XXX', // 创建人登陆用户名
          createdDt: timeStr// 创建时间
          }
        if (!this.makedate.menuId) {
            this.$alert('您是否确认增加一级分类', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.addEvent(newChild)
            }
          })
        } else {
          this.makedate.children.push(newChild)
          console.log(this.tableTitle)
          console.log('-----------')
          this.addEvent(newChild)
        }
      },
      getTree () {
        let param = {
          parentId: '0',
          menuId: '0', // 0查询全树，否则查询该节点下树
          type: '3', // 1-数据集，2-目录，3-菜单，4-数据连接，5-外部连接
          optMode: '1'
        }

         this.$http.post(MGNDIRQUERY, param).then(res => {
           console.log(res.status)
           console.log(res.data.data)
           if (res.status == '200') {
            this.menuData = res.data.data
            console.log(res.data.data)
           }
         })
      },
      // 删除树节点
      deleteModel (menuId) {
          debugger
        this.isOne = false
        let param = {
          menuId: menuId,
          'optMode': 'D'
          }
        this.$http.post(DELETE_MENU, param).then(res => {
          console.log('删除成功')
          console.log(res)
          if (res.data.code == '200') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getTree()
          }
        }).catch(err => {
          console.log('删除菜单失败')
          console.log(err)
        })
      }, // 修改树节点
      updateModel () {
        let param = {
          optMode: 'U',
          menuId: this.renameData.menuId,
          name: this.newTitle,
          type: this.renameData.type,
          icon: this.icon,
          attr: this.renameData.attr,
          parentId: this.renameData.parentId,
          path: this.menupath,
          mark: this.renameData.mark,
          seqno: this.renameData.seqno,
          createdBy: this.renameData.createdBy,
          createdDt: this.renameData.createdDt,
          updatedBy: this.$storeSave.state.userInfo.username || 'XXX',
          updatedDt: getTime.getTime()
        }
        this.$http.post(EDIT_MENU, param).then(res => {
          console.log('修改成功')
          console.log(res)
          if (res.data.code == '200') {
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
           this.newTitle = ''
           this.textarea = ''
           this.radio = ''
           this.menupath = ''
           this.getTree()
          }
        }).catch(err => {
          console.log('修改菜单失败')
          console.log(err)
        })
      },
      remove (node, data) {
        // 4.删除按钮 在表名称右侧,点击删除 弹出确认信息框 分组删除,需要下面没有表才能删除
        console.log(node)
        const parent = node.parent
        const children = parent.data.children || parent.data
        const index = children.findIndex(d => d.menuId === data.menuId)
        this.activatedId = data.menuId
        console.log('-----------------')
        console.log(children[index].children)
        if (children[index].children && children[index].children.length > 0) {
          this.$alert('当前分组存在子级，是否确定删除？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.deleteModel(data.menuId)
            }).catch(() => {
              console.log('取消删除')
            })
        } else {
          this.$alert('确定删除当前数据？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                debugger
              this.deleteModel(data.menuId)
              // this.$message({
              //   type: 'success',
              //   message: '删除成功!'
              // });
            }).catch(() => {
              console.log('取消')
            })
        }
      },
       /* 新增的方法 */
       // 新增节点点击事件
       handleNodeClick (node, data, value) {
           debugger
           // 1.获取当前节点的各种参数
           var menuId = data.data.menuId
           // 2.根据获取到的节点的各种参数在右侧展示具体的数据
           this.rename(node, data.data, menuId)
       },
       // 移动菜单
       moveMenu (node, data, flag) {
           let param = {
               menuId: data.menuId,
               moveFlag: flag,
               seqno: data.seqno,
               parentId: data.parentId
           }
           ajax.post(MOVE_MENU, param).then(res => {
            }).finally(() => {
               this.getTree()// 查询目录
            })
       }
    }
}
</script>
<style scoped lang='less'>
    .menuAside{
        border-left: 1px solid #ebeef5;
        border-bottom:1px solid #ccc;
        border-right:1px solid #ccc;
    }
  .addBox{
    width: 100%;
    height: 50px;
    padding-top: 5px;
    background: #ffffff;
    border: 1px solid #ebeef5;
    font-size:18px ;
  }

  .submitBox{
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;

  }

  .addModel{
    width:100%;
    padding-bottom: 5px;
    padding-left:2px;
    background: #FFF;
    border: 1px solid #ccc;
    .selectType{
    border: 1px solid #FFF;
    background: #FFF;
    width:60%;
    margin:10px auto;
    height: calc(100% - 20px);
    .addTable{
      width:60%;
      height:30rem;
      margin: 0 auto;
      tr td{
        width:300px;
      }
    }
  }

  }
  .activeBGC{
     color:#17a2b8;
  }
  .form-button{
      display: flex;
      justify-content: space-around;
      vertical-align: center;
      align-items: center;
  }

</style>
